import Vue from 'vue';

const inputValidate = function (name, regExp) {
    Vue.directive(name, {
        bind: function (el) {
            el.handler = function (e) {
                let input = null;
                if (el.tagName === 'INPUT') {
                    input = el;
                } else {
                    input = el.getElementsByTagName('input')[0] || el.getElementsByTagName('textarea')[0]
                }
                input.value = input.value.replace(regExp, ''); // 忽略数字与字母以外的字符
            };
            el.addEventListener('input', el.handler, true);
        },
        unbind: function (el) {
            // let input = el.tagName === 'INPUT' ? el : el.getElementsByTagName('input')[0];
            el.removeEventListener('input', el.handler, true);
        }
    });
};

/**
 * @function 表单元素限制输入类型(数字与字母)
 * @directive: v-number-letter-only
 * @application: iview组件Input
 * @BusinessScenarios 密码
 */
const inputNumberLetterOnly = function () {
    inputValidate('number-letter-only', /[^0-9a-zA-Z]+/); // 只允许数字或字母
};

/**
 * @function 表单元素限制输入类型(数字)
 * @directive: v-number-only
 * @application: iview组件Input
 * @BusinessScenarios 页数
 */
const inputNumberOnly = function () {
    inputValidate('number-only', /[^0-9]+/); // 只允许数字
};

/**
 * @function 表单元素限制输入类型(数字|字母|汉字)
 * @directive: v-number-letter-chinese-only
 * @application: iview组件Input
 * @BusinessScenarios 密码
 */
const inputNumberLetterChineseOnly = function () {
    inputValidate('number-letter-chinese-only', /[^A-Za-z0-9\u4e00-\u9fa5]+/); // 只允许数字或字母或汉字
};

/**
 * @function 表单元素限制输入类型(数字|字母|特殊符号)
 * @directive: v-number-letter-symbol-only
 * @application: iview组件Input
 * @BusinessScenarios 密码
 */
const inputNumberLetterSymbolOnly = function () {
    inputValidate('number-letter-symbol-only', /[^a-zA-Z0-9:',!();\-\-，。；：=+*&^%$#~‘’（）@！？]+/); // 只允许数字或字母或特殊字符
};

/**
 * @function 表单元素限制输入类型(数字|字母|中文|特殊符号)
 * @directive: v-number-letter-symbol-only
 * @application: iview组件Input
 * @BusinessScenarios 密码
 */
const inputNumberLetterChineseSymbolOnly = function () {
    inputValidate('number-letter-chinese-symbol-only', /\s/g); // 只允许数字或字母或中文或特殊字符
};

// 正则中需要转义的字符:* . ? - + $ ^ [ ] ( ) { } | \ /
export { inputNumberOnly, inputNumberLetterOnly, inputNumberLetterChineseOnly, inputNumberLetterSymbolOnly, inputNumberLetterChineseSymbolOnly };
